<template>
	<view class="wrapper">
    <view class="list" v-if="list.length > 0">
      <!--<view class="item" v-for="(item, index) in list" :key="index" :class="{ 'is-default': item.checked }">-->
      <view class="item" v-for="(item, index) in list" :key="index">
        <view class="desc">
          <view class="city" v-if="item.city">
            {{ item.city.province }}, {{ item.city.city }}, {{ item.city.area }}
          </view>
          <view class="address">
            {{item.address}}
          </view>
          <view class="nickname">
            收件人: <text>{{item.nickname}}</text>
          </view>
          <view class="mobile">
            手机号码: <text>{{item.mobile}}</text>
          </view>
          <view class="default" v-if="false">
            <u-switch v-model="item.checked" size="32" @change="changeDefault(item)"></u-switch>
          </view>
        </view>
        <view class="ops">
          <u-icon name="edit-pen-fill" color="green" size="45" @click="handleEdit(item)"></u-icon>
          <u-icon name="trash" color="red" size="45" @click="handleDelete(item)"></u-icon>
        </view>
      </view>
      <view class="add" @click="handleCreate">
        <u-icon name="plus" color="red" size="28"></u-icon>
        <text>添加新地址</text>
      </view>
    </view>
    <view class="nothing" @click="handleCreate" v-else>
      暂无地址, 点击添加地址
    </view>
    <arrow />
  </view>
</template>

<script>
  import Arrow from '../../components/arrow/index'
  import Address from '../../api/address'
  const addressModel = new Address()

	export default {
    components: {
      Arrow
    },
		data() {
			return {
			  list: []
			}
		},
		onLoad() {
		  this.getList()
		},
		methods: {
		  async getList() {
        const { data } = await addressModel.list()
        this.list = data
        this.list.forEach(x => {
          if (+x.is_default === 1) {
            this.$set(x, 'checked', true)
          }
        })
      },
      changeDefault(item) {
        addressModel.setDefault({ id: item.id, value: +item.checked }).then(() => {
          if (+item.checked === 1) {
            this.list.forEach(x => {
              if (x.id !== item.id) {
                this.$set(x, 'checked', false)
              }
            })
          }
        })
      },
      handleCreate() {
		    uni.navigateTo({
          url: '/sub_service/address/edit'
        })
      },
      handleEdit(item) {
        uni.navigateTo({
          url: `/sub_service/address/edit?id=${item.id}`
        })
      },
      handleDelete(item) {
        uni.showModal({
          title: '您确定要删除此地址吗?',
          success: res => {
            if (res.confirm) {
              addressModel.remove({ id: item.id }).then(() => {
                uni.$u.toast('操作成功')
                this.list = this.list.filter(x => x.id !== item.id)
              })
            }
          }
        })
      }
		}
	}
</script>

<style lang="scss" scoped>
.wrapper {
  background: $background_color;
  padding: 20rpx;
  .list {
    .item {
      padding: 20rpx;
      background: white;
      border-radius: 10rpx;
      margin-bottom: 20rpx;
      display: flex;
      &.is-default {
        border: 1rpx solid $main_color;
      }
      .desc {
        flex: 1;
        font-size: 24rpx;
        view {
          line-height: 22px;
          &.city {
            font-weight: 700;
          }
          &.nickname, &.mobile {
            text {
              font-weight: 700;
              margin-left: 10rpx;
            }
          }
          &.default {
            margin-top: 10rpx;
          }
        }
      }
      .ops {
        width: 100rpx;
        display: flex;
        justify-content: space-around;
        align-items: center;
      }
    }
  }
  .nothing {
    background: white;
    padding: 20rpx;
    height: 100px;
    line-height: 100px;
    font-size: 24rpx;
    text-align: center;
    border-radius: 10rpx;
    color: red;
  }
  .add {
    background: white;
    padding: 20rpx;
    height: 20px;
    line-height: 20px;
    font-size: 24rpx;
    border-radius: 10rpx;
    color: red;
    display: flex;
    text {
      margin-left: 10rpx;
    }
  }
}
</style>
